<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('新增货位')"/>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-cellInfo-add">
			<div class="form-group">
				<label class="col-sm-3 control-label">货位编码：</label>
				<div class="col-sm-8">
					<input id="cellCode" name="cellCode" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">货位描述：</label>
				<div class="col-sm-8">
					<input id="memo" name="memo" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">巷道：</label>
				<div class="col-sm-8">
					<select id="shelfId" name="shelfId" class="form-control">
						<option v-for="(shelf, index) in shelfs" :value="shelf.shelfId" v-cloak>{{shelf.shelfName}}</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">排：</label>
				<div class="col-sm-8">
					<input id="sPai" name="sPai" class="form-control" type="number" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">列：</label>
				<div class="col-sm-8">
					<input id="sLie" name="sLie" class="form-control" type="number" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">层：</label>
				<div class="col-sm-8">
					<input id="sFloor" name="sFloor" class="form-control" type="number" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">长 (mm)：</label>
				<div class="col-sm-8">
					<input id="length" name="length" class="form-control" type="number">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">宽 (mm)：</label>
				<div class="col-sm-8">
					<input id="width" name="width" class="form-control" type="number">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">高 (mm)：</label>
				<div class="col-sm-8">
					<input id="hight" name="hight" class="form-control" type="number">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<select class="form-control" id="state" name="state">
						<option value="0">无货</option>
						<option value="1">有货</option>
						<option value="2">出库中</option>
						<option value="3">入库中</option>
						<option value="4">故障</option>
						<option value="5">入库需盘点</option>
						<option value="6">出库需盘点</option>
						<option value="7">移库需盘点</option>
						<option value="8">禁用</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">排序：</label>
				<div class="col-sm-8">
					<input id="orders" name="orders" class="form-control" type="number" required>
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "system/cellInfo"

		function submitHandler(){
	        if($.validate.form()){
	            $.operate.save(prefix + "/add", $('#form-cellInfo-add').serialize());
	        }
	    }

		var app = new Vue({
			el: '.wrapper',
			data: {
				shelfs: []
			},
			methods: {
				getShelfs: function(){
					var that = this;
					$.ajax({
						cache: true,
						type: "POST",
						url: "/system/shelfInfo/list",
						data: {},
						async: false,
						error: function(request){
							$.modal.alertError("系统错误");
						},
						success: function(data){
							that.shelfs = data.rows;
						}
					});
				}
			},
			created(){
				this.getShelfs();
			}
		})
	</script>
</body>
</html>
